<template>
  <view>
    <mxp-popup ref="mxpPopupref" width="241px" model="center" background="transparent" @hide="onHide">
      <view class="unlock-module">
        <image src="/static/images/video/ad_popup_bg1.jpg" mode="scaleToFill" style="width: 241px; height: 116px; border-radius: 10px 10px 0 0"></image>
        <view class="content-box">
          <view class="title-box">
            <text class="title">恭喜您，获得免费看剧名额</text>
          </view>
          <mxp-button
            text="看广告免费解锁本集"
            style="width: 100%"
            radius="square"
            background="linear-gradient( 90deg, #FDBF00 0%, #FD6E00 100%)"
            @click="openADFun"
          ></mxp-button>
          <mxp-button text="免广告解锁" :plain="true" style="width: 100%" :cusStyle="{ marginTop: '15px' }" @click="openPayFun"></mxp-button>
          <view v-if="showountDown" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; margin-top: 15px">
            <mxp-count-down
              style="display: flex; align-items: center; justify-content: center; height: 20px; padding: 0; margin: 0; line-height: 20px"
              color="#606266"
              :cusStyle="{ lineHeight: '20px' }"
              fontSize="14px"
              :time="4 * 1000"
              format="ss"
              @finish="openADFun"
            ></mxp-count-down>
            <text style="font-size: 14px; line-height: 20px; color: #606266">秒后自动观看广告</text>
          </view>
        </view>
        <view class="close-box" hoverClass="hover" @click="hideClick"><mxp-icon name="guanbi1" size="30px" color="#ffffff"></mxp-icon></view>
      </view>
    </mxp-popup>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ref } from 'vue';
  import MxpPopup from '@/mxp-ui/mxp-popup/mxp-popup.vue';
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import MxpCountDown from '@/mxp-ui/mxp-count-down/mxp-count-down.vue';

  export type ShowEvent = {
    /** 打开广告 */
    openAd?: () => void;
    /** 关闭弹出框 */
    closePopup?: () => void;
    /** 再次打开充值模版 */
    openPay?: () => void;
  };
  const instance = getCurrentInstance();
  const mxpPopupref = ref<InstanceType<typeof MxpPopup>>();
  const showountDown = ref(false);
  let openAd: ShowEvent['openAd'] = undefined;
  let closePopup: ShowEvent['closePopup'] = undefined;
  let openPay: ShowEvent['openPay'] = undefined;

  /** 显示 */
  function show(_data: ShowEvent) {
    openAd = _data.openAd;
    openPay = _data.openPay;
    closePopup = _data.closePopup;
    if (!mxpPopupref.value && instance?.proxy?.$refs?.mxpPopupref) {
      mxpPopupref.value = instance?.proxy.$refs.mxpPopupref as InstanceType<typeof MxpPopup>;
    }

    showountDown.value = true;
    mxpPopupref.value?.show();
  }

  /** 隐藏 */
  function hide() {
    showountDown.value = false;
    mxpPopupref.value?.hide();
  }

  /**
   * 监听隐藏
   */
  function onHide(type: 'button' | 'confirm' | 'mask' | 'rest') {
    showountDown.value = false;
    if (type === 'mask') {
      typeof closePopup === 'function' && closePopup();
    }
  }

  /** 支付关闭 */
  function hideClick() {
    hide();
    typeof closePopup === 'function' && closePopup();
  }

  /** 再次打开支付模版 */
  function openPayFun() {
    hide();
    typeof openPay === 'function' && openPay();
  }

  /** 广告解锁 */
  function openADFun() {
    hide();
    typeof openAd === 'function' && openAd();
  }

  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
  });
</script>

<style lang="scss" scoped>
  .unlock-module {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 241px;

    .content-box {
      position: relative;
      z-index: 2;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 241px;
      padding: 20px;
      padding-top: 0;
      margin-top: -20px;
      background: #ffffff;
      border-radius: 10px;

      .title-box {
        margin-bottom: 15px;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #522700;
        }
      }
    }

    .close-box {
      padding: 4px;
      margin-top: 20px;
      border-radius: 50%;
    }

    .hover {
      opacity: 0.7;
    }
  }
</style>
